<template>
  <div class="main-layout">
    <el-container>
      <el-header class="border-aqua">
        <DapingHeader :title="mainTitle" :titleClass="mainTitleClass"></DapingHeader>
        <!-- <el-button type="primary" class="themeButton" style="color:black;background-color: white;top:0;" @click="useLightTheme">浅色系</el-button>
        <el-button type="primary" class="themeButton" style="color:white;background-color: black;top:4rem;" @click="useDarkTheme">深色系</el-button> -->
      </el-header>
      <el-main>
        <div class="main-item">
          <div class="main-item-block main-item-row">
            <div class="main-item-block-item border-aqua">
              <DapingHeader :title="juminTitle" :titleClass="level01TitleClass"></DapingHeader>
              <ViewJumin></ViewJumin>
            </div>
            <div class="main-item-block-item border-aqua">
              <DapingHeader :title="fangjianTitle" :titleClass="level01TitleClass"></DapingHeader>
              <ViewFangjian></ViewFangjian>
            </div>
          </div>
          <div class="main-item-block border-aqua">
            <DapingHeader :title="jiankangshishijianceTitle" :titleClass="level01TitleClass"></DapingHeader>
            <ViewShishi></ViewShishi>
            <div style="width: 100%;height:15%;">
              <DapingNotice :notice="dataBaojing"></DapingNotice>
            </div>
          </div>
        </div>
        <div class="main-item main-center">
          <div class="main-center-title">
            <DapingHeader :title="dituTitle" :titleClass="dituTitleClass"></DapingHeader>
          </div>
          <div class="main-center-map border-aqua">
            <EchartMapHainan :seriesNameProp="ChinaMapName" :seriesMapProp="ChinaSeriesMap" :mapUrlProp="ChinaMapUrl" :titleProp="{}" :baseMapProp="dataChinaMap" :seriesMapZoomProp="ChinaMapZoom"
          :seriesDataProp="ChinaMapData" :visualMapProp="ChinaMapVMap" :specialAreasProp="{}" :showVisualMap="showVisualMap" :mapBgColorProp="mapBgColorProp" :mapBgEmColorProp="mapBgEmColorProp" :showProvinces="showProvinces"></EchartMapHainan>
          </div>
        </div>
        <div class="main-item">
          <div class="main-item-block border-aqua" style="min-height: 40%;">
            <DapingHeader :title="tianqiTitle" :titleClass="level01TitleClass"></DapingHeader>
            <ViewTianqiHF></ViewTianqiHF>
          </div>
          <div class="main-item-block border-aqua">
            <DapingHeader :title="zhaohuTitle" :titleClass="level01TitleClass"></DapingHeader>
            <ViewZhaohu></ViewZhaohu>
          </div>
        </div>
      </el-main>
      <el-footer>
        <div class="footer-item border-aqua">
            <DapingHeader :title="shequzhinengTitle" :titleClass="level01TitleClass"></DapingHeader>
            <ViewShequ></ViewShequ>
          </div>
        <div class="footer-item border-aqua">
            <DapingHeader :title="jinricaidanTitle" :titleClass="level01TitleClass"></DapingHeader>
            <ViewCaidan></ViewCaidan>
          </div>
        <div class="footer-item border-aqua">
            <DapingHeader :title="kechengTitle" :titleClass="level01TitleClass"></DapingHeader>
            <ViewKecheng></ViewKecheng>
          </div>
        <div class="footer-item border-aqua">
            <DapingHeader :title="paigongdanTitle" :titleClass="level01TitleClass"></DapingHeader>
            <ViewPaigongdan></ViewPaigongdan>
          </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import mqtt from 'mqtt/dist/mqtt.min'
import { request } from '@/api/request.js'
import { defineAsyncComponent } from 'vue'
import { mapMutations } from "vuex";
import DapingHeader from "@/components/DapingHeader.vue";
import ViewJumin from "@/views/ViewJumin.vue";
import ViewFangjian from '@/views/ViewFangjian.vue'
import ViewShishi from '@/views/ViewShishi.vue'
import DapingNotice from '@/components/DapingNotice.vue'
import ViewCaidan from "@/views/ViewCaidan.vue";
import ViewShequ from "@/views/ViewShequ.vue";
import ViewKecheng from "@/views/ViewKecheng.vue";
import ViewZhaohu from "@/views/ViewZhaohu.vue";
import ViewPaigongdan from "@/views/ViewPaigongdan.vue";
import ViewTianqiHF from "@/views/ViewTianqiHF.vue";
const EchartMapHainan = defineAsyncComponent(()=>{
  import('@/components/EchartMapHainan.vue')
})
import axios from 'axios';
import { ElMessage,ElMessageBox } from 'element-plus';
var client;
// const decoder = new TextDecoder('utf-8')
export default {
  data() {
    return {
      mainTitleClass: 'mainTitle',
      mainTitle: "智慧康养大数据平台",
      dituTitleClass: 'dituTitle textMap',
      dituTitle: '连锁康养分布',
      level01TitleClass: 'dituTitle textLeft',
      tianqiTitle: '今日天气及近日天气变化',
      zhaohuTitle: '专业照护',
      shequzhinengTitle: '社区智能化',
      jinricaidanTitle: '今日菜单',
      kechengTitle: '课程活动',
      paigongdanTitle: '实时派工单',
      jiankangshishijianceTitle: '健康实时检测',
      juminTitle: '爱情海居民',
      fangjianTitle: '康养旅居房间',
      dataBaojing: [],
      dataChinaMap: {},
      ChinaMapTitle: {
        text: '中国省级行政区2020年人口数',
        right: '10'
      },
      ChinaMapName: '中国',
      ChinaSeriesMap: 'HN',
      ChinaMapZoom: 1,
      ChinaMapTop: '50%',
      ChinaMapUrl: 'http://localhost:8000/Chinajson',
      // ChinaMapData: [
      //   { name: '北京市', value: 21893095 },
      //   { name: '天津市', value: 13866009 },
      //   { name: '河北省', value: 74610235 },
      //   { name: '山西省', value: 34915616 },
      //   { name: '内蒙古自治区', value: 24049155 },
      //   { name: '辽宁省', value: 42591407 },
      //   { name: '吉林省', value: 24073453 },
      //   { name: '黑龙江省', value: 31850088 },
      //   { name: '上海市', value: 24870895 },
      //   { name: '江苏省', value: 84748016 },
      //   { name: '浙江省', value: 64567588 },
      //   { name: '安徽省', value: 61027171 },
      //   { name: '福建省', value: 41540086 },
      //   { name: '江西省', value: 45188635 },
      //   { name: '山东省', value: 101527453 },
      //   { name: '河南省', value: 99365519 },
      //   { name: '湖北省', value: 57752557 },
      //   { name: '湖南省', value: 66444864 },
      //   { name: '广东省', value: 126012510 },
      //   { name: '广西壮族自治区', value: 50126804 },
      //   { name: '海南省', value: 10081232 },
      //   { name: '重庆市', value: 32054159 },
      //   { name: '四川省', value: 83674866 },
      //   { name: '贵州省', value: 38562148 },
      //   { name: '云南省', value: 47209277 },
      //   { name: '西藏自治区', value: 3648100 },
      //   { name: '陕西省', value: 39528999 },
      //   { name: '甘肃省', value: 25019831 },
      //   { name: '青海省', value: 5923957 },
      //   { name: '宁夏回族自治区', value: 7202654 },
      //   { name: '新疆维吾尔自治区', value: 29852345 },
      //   { name: '台湾省', value: 7474200 },
      //   { name: '香港特别行政区', value: 683218 },
      //   { name: '澳门特别行政区', value: 23561236 }
      // ],
      ChinaMapData: [
        { name: '海口市', value: 21893095 },
        { name: '三亚市', value: 13866009 },
        { name: '三沙市', value: 74610235 },
        { name: '儋州市', value: 34915616 },
        { name: '五指山市', value: 24049155 },
        { name: '琼海市', value: 42591407 },
        { name: '文昌市', value: 24073453 },
        { name: '万宁市', value: 31850088 },
        { name: '东方市', value: 24870895 },
        { name: '定安县', value: 84748016 },
        { name: '屯昌县', value: 64567588 },
        { name: '澄迈县', value: 61027171 },
        { name: '临高县', value: 41540086 },
        { name: '白沙黎族自治县', value: 45188635 },
        { name: '昌江黎族自治县', value: 101527453 },
        { name: '乐东黎族自治县', value: 99365519 },
        { name: '陵水黎族自治县', value: 57752557 },
        { name: '保亭黎族苗族自治县', value: 66444864 },
        { name: '琼中黎族苗族自治县', value: 126012510 }
      ],
      ChinaMapVMap: {
        type: 'continuous',
        left: 'right',
        min: 3000000,
        max: 127000000,
        inRange: {
          color: [
            '#313695',
            '#4575b4',
            '#74add1',
            '#abd9e9',
            '#e0f3f8',
            '#ffffbf',
            '#fee090',
            '#fdae61',
            '#f46d43',
            '#d73027',
            '#a50026'
          ]
        },
        text: ['High', 'Low'],
        calculable: true,
        seriesIndex: 0,
        // itemWidth: 20,
        // itemHeight: 120
      },
      showVisualMap: false,
      mapBgColorProp: "#192f5a",
      mapBgEmColorProp: "#0ee3f6",
      // 要在地图上显示的省市
      // showProvinces:['北京市','山东省','云南省','海南省'],
      showProvinces:['琼海市','万宁市'],
      options:{
        port: 8083,
        connectTimeout: 4000,
        clientId: "emqx_vue_" + Math.random().toString(16).substring(2, 8),
      },
    };
  },
  components: { 
    DapingHeader,
    ViewJumin,
    ViewFangjian,
    ViewShishi,
    DapingNotice,
    ViewCaidan,
    ViewShequ,
    ViewKecheng,
    ViewZhaohu,
    ViewPaigongdan,
    ViewTianqiHF,
    EchartMapHainan
  },
  mounted() {
    this.setHTMLFontSize();
    this.setThemeStore('dark');
    this.getBaojing();
    this.getChinaMap();
    this.mqttMsg();
  },
  methods: {
    // 将存在vuex中的更改主题方法拿过来
    ...mapMutations(['setThemeStore','setColorsStore','setHtmlScaleStore']),
    setHTMLFontSize(){
      const _this = this;
      _this.height = document.body.clientHeight;
      _this.width = document.body.clientWidth;
      // 通过高度计算
      // _this.height = document.body.clientHeight;
      // document.documentElement.style.fontSize = 10 * parseFloat(_this.height/1080) + "px";
      // this.setHtmlScaleStore(parseFloat(_this.height/1080));
      // 通过高度计算
      // _this.width = document.body.clientWidth;
      // document.documentElement.style.fontSize = 10 * parseFloat(_this.width/1920) + "px";
      // this.setHtmlScaleStore(parseFloat(_this.width/1920));
      if(parseFloat(_this.height/_this.width) < 0.5625){
        document.documentElement.style.fontSize = 10 * parseFloat(_this.height/1080) + "px";
        this.setHtmlScaleStore(parseFloat(_this.height/1080));
      }else{
        document.documentElement.style.fontSize = 10 * parseFloat(_this.width/1920) + "px";
        this.setHtmlScaleStore(parseFloat(_this.width/1920));
      }
    },
    useLightTheme(){
      this.setThemeStore('light')
      this.setColorsStore()
    },
    useDarkTheme(){
      this.setThemeStore('dark')
      this.setColorsStore()
    },
    getBaojing(){
      request({
        url: '/noticebaojing',
        method: 'get'
      }).then(res=>{
        this.dataBaojing = res.data;
      })
    },
    getChinaMap(){
      // 在vue3中 需要把json文件放置在 public 文件夹下，必须用‘./’路径获取json文件
      axios.get('./json/china_hainan.json').then(res=>{
        this.dataChinaMap = res.data;
      })
    },
    mqttMsg(){
      client = mqtt.connect('ws://broker.emqx.io/mqtt', this.options);
      client.on('connect',()=>{
        console.log('连接成功');
        // client.subscribe('ww_daping_ceshi/message',{qos: 0}, (error, granted) => {
        client.subscribe('ch_daping_ceshi/message',{qos: 0}, (error, granted) => {
          if (error) {
            console.log(error)
          } else {
            console.log('granted', granted)
          }
        })
      });
      client.on('message',(topic, message)=>{
        console.log('收到来自' + topic, '的消息' + message);
        let msg = JSON.parse(message)
        if (msg.prompt==true) {
          // alert(msg.buildingNo+"号楼"+msg.floorNo+"层"+msg.roomNo+"房间的"+msg.elderName+msg.problem);
          ElMessageBox.confirm(
            msg.buildingNo+"号楼"+msg.floorNo+"层"+msg.roomNo+"房间的"+msg.elderName+msg.problem,
            "报警！",
            {
              confirmButtonText: '马上派人',
              cancelButtonText: '人手不足',
              type: 'warning',
              center: true,
            }
          ).then(()=>{
            ElMessage({
              type:"success",
              message:"照护人员已在路上"
            });
          }).catch(()=>{
            ElMessage({
              type:"error",
              message:"请尽快安排照护人员"
            });
          })
        }
        // alert('收到来自' + topic, '的消息' + message)

      });
      client.on('reconnect', (error) => {
        console.log('正在重连', error)
      });
      client.on('error', (error) => {
        console.log('连接失败', error)
      });
    },
  }
};
</script>

<style lang="less" > 
.border-aqua{
  border: 0px solid aqua;
}
.themeButton{
  position: absolute;
  right: 2rem;
}
.flex-row{
  height: 85%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .row-item{
    height: 100%;
    display: flex;
    align-items: center;
  }
}
.flex-column{
  height: 85%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .column-item{
    flex: 1;
  }
}
.main-layout {
  width: 100vw;
  height: 100vh;
  background-image: radial-gradient(farthest-corner at 50% 35%,#192e59,#040f21,#040d1e);
  // background: url('@/assets/img/mainbg.png') var(--bgColor);
  .el-container {
    width: 92%;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    border: 0px solid white;
    .el-header {
      height: 8%;
      display: flex;
      justify-content: center;
      // align-items: center;
    }
    .el-main {
      height: 54%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      padding: 0;
      border: 0px solid red;
      .main-item {
        width: 32%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 0px solid red;
        .main-item-block {
          flex: 1;
          display: flex;
          overflow: hidden;
          flex-direction: column;
          box-sizing: border-box;
          border: 0px solid red;
        }
        .main-item-row{
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          box-sizing: border-box;
          border: 0px solid blue;
          .main-item-block-item{
            // flex: 1;
            width: 49%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            box-sizing: border-box;
            margin-right: 0rem;
            border: 0px solid red;
          }
        }
      }
      .main-center {
        width: 36%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        margin: 0 3rem;
        border: 0rem solid yellowgreen;
        .main-center-title{
          width: 100%;
          height: 10%;
          display: flex;
          justify-content: center;
          border: 0rem solid red;
        }
        .main-center-map{
          width: 100%;
          flex: 1;
          border: 0rem solid red;
        }
      }
    }
    .el-footer {
      width: 100%;
      height: 38%;
      display: flex;
      padding: 0;
      // padding-right: 2.5rem;
      box-sizing: border-box;
      justify-content: space-between;
      .footer-item {
        // flex: 1;
        width: 24%;
        box-sizing: border-box;
        overflow: hidden;
        // margin: 0 2rem;
        border: 0px solid red;
        &:last-child{
          // display: flex;
          // flex-direction: column;
          // align-items: flex-end;
          // margin-right: 0;
          // padding-right: 0;
          border: 0px solid blue;
        }
      }
    }
  }
}
</style>
